<template>
    <div>
        <nav-header>
			<template slot="menuBefore">
				<li><router-link to="/affairs/led/led-list" tag="a">LED屏幕管理</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>{{ied_name}}</li>
		</nav-header>
        <div class="ied-detail">
            <div class="header-title">
                <span>{{ied_name}}</span>
                <el-button type="primary" @click="editEquipment">编辑设备</el-button>
            </div>
            <div id='screen-img' v-html='img_content'>
                
            </div>
            <div class="show-list">
                <div class="header-title">
                    <span>节目列表</span>
                    <el-button type="primary" @click="newShow">新增节目</el-button>
                </div>
                <div class="zh-table-contents" style="margin-top: 20px">
                    <el-table
                        :data="list_data"
                        border
                        max-height="600"
                        style="width: 100%">
                        <el-table-column
					      type="index"
					      label="序号"
					      align="center"
					      show-overflow-tooltip
					      width="50">
					    </el-table-column>
                        <el-table-column
                        prop="name"
                        label="节目名"
                        align="center"
                        show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.name.substr (0, scope.row.name.length - 4)}}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
                            prop=""
                            label="节目类型"
                            align="center"
                            show-overflow-tooltip>
                        </el-table-column> -->
                        <el-table-column
                            prop="status"
                            label="状态"
                            align="center"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.status === 1 ? '播放中' : '未播放'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        prop="handle"
                        label="操作"
                        align="center"
                        width="250"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <!-- <el-button type="text" v-if="scope.row.status === 1">停止</el-button> -->
                            <el-button type="text" v-if="scope.row.status === 0" @click="playShow(scope.row.name)">播放</el-button>
                            <!-- <el-button type="text" @click="editShow(scope.row,'one')">编辑</el-button> -->
                            <el-button type="text" class="delete-button" @click="delShow(scope.row.name)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            title="编辑设备"
            :visible.sync="is_edit"
            width="500px"
            :before-close="cancelEdit">
            <el-form :model="editForm" :rules="rules" ref="editForm" hide-required-asterisk label-width="100px" class="demo-editForm">
                <el-form-item label="设备名称：" prop="device_name">
                    <el-input v-model="editForm.device_name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="设备IP：">
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="editForm.ip1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="editForm.ip2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="editForm.ip3"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-input type="number" v-model="editForm.ip4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item> -->
                <el-form-item label="设备IP：" prop="ip">
                    <el-input v-model="editForm.ip"></el-input>
                </el-form-item>
                <!-- <el-form-item label="屏幕大小：" class="screen-size">
                    <el-col :span="8">
                        <el-form-item label="宽：" prop="width">
                            <el-input type="number" v-model="editForm.width"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2"></el-col>
                    <el-col :span="8">
                        <el-form-item label="高：" prop="height">
                            <el-input type="number" v-model="editForm.height"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEdit">取 消</el-button>
                <el-button type="primary" @click="saveEqupment('editForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                is_edit: false,
                total_number: 0,
                ied_name: '',
                img_content: null,
                ied_list: null,
                list_data: [],
                listParam: {
                    page_index: 1,
                    page_size: 10
                },
                editForm: {
                    device_name: '',
                    ip: '',
                    width: '',
                    height: '',
                },
                rules: {
                    device_name: [
                        { required: true, message: '请输入设备名称', trigger: 'blur' },
                    ],
                    ip: [
                        { required: true, message: '请输入设备IP', trigger: 'blur' },
                        {pattern: this.rules.ip.reg, message: this.rules.ip.msg, trigger: 'blur'}
                    ],
                    width: [
                        { required: true, message: '请输入宽度', trigger: 'blur' },
                    ],
                    height: [
                        { required: true, message: '请输入高度', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
            this.getScreen();
            this.getList();
        },
        methods: {
            /**
             * 新增节目
             */
            newShow() {
                sessionStorage.setItem('ied_list', JSON.stringify(this.ied_list));
                this.$router.push('/affairs/led/led-show');
            },
            /**
             * 编辑节目
             */
            editShow() {
                this.$router.push('/affairs/led/led-show#edit');
            },
            editEquipment(){
                this.is_edit = true;
                this.editForm.device_name = this.ied_list.name;
                this.editForm.ip = this.ied_list.ip;
            },
            cancelEdit() {
                this.$refs['editForm'].resetFields();
                this.is_edit = false;
            },
            /**
             * 编辑设备
             */
            saveEqupment(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params = {
                            id: this.$route.params.id,
                            name: this.editForm.device_name,
                            ip: this.editForm.ip,
                            width: this.editForm.width,
                            height: this.editForm.height,
                        }
                        let success = (res => {
                            this.is_edit = false;
                            this.$message.success(res.msg);
                            this.getScreen();
                        })

                        this.$ajax.put('api/led/single', params, {func: {success: success}})
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 获取当前投屏内容
             */
            getScreen() {
                let success = (res=>{
                    this.ied_name = res.data.name;
                    this.ied_list = res.data;
                    let time = new Date().getTime();
                    this.img_content = `<img src='http://${res.data.ip}/api/screenshot?${time}' />`;
            	})
                let params = {id: this.$route.params.id}

            	this.$ajax.get('api/led/single', {params: params, func:{success: success}})
            },
            /**
             * 获取节目列表
             */
            getList() {
            	let success = (res=>{
                    this.list_data = [];

                    if (!is_empty(res.data.playing.name)) {
                        this.list_data.push({
                            name: res.data.playing.name,
                            status: 1,
                        })
                    }

                    if (!is_empty(res.data.contents)) {
                        res.data.contents[0].content.forEach(item => {
                            if (item.name !== res.data.playing.name) {
                                this.list_data.push({
                                    name: item.name,
                                    status: 0
                                })
                            }
                        })
                    }
            	})
                let params = {id: this.$route.params.id};

            	this.$ajax.get('api/led/programlist', {params: params, func:{success: success}})
            },
            /**
             * 停止或播放当前节目
             */
            playShow(name) {
                let yes = (res => {
					let success = ( res=>{
                        this.$message.success(res.msg); 
                        this.img_content = null;

                        this.getList();
                        this.getScreen();
                    })
                    let params = {
                        id: this.$route.params.id,
                        program_name: name.substr(0, name.length - 4)
                    }
                    
					this.$ajax.put('api/led/program', params, {func: {success: success}})
				})
                let cancel = ( res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '是否要播放该节目？'});
            },
            /**
             * 删除当前节目
             */
            delShow(name) {
                let yes = (res => {
					let success = ( res=>{
	            		this.$message.success(res.msg);                        
	            		this.getList();
                    })
                    let params = {
                        id: this.$route.params.id,
                        program_name: name.substr(0, name.length - 4)
                    }
                    
					this.$ajax.delete('api/led/program', {params: params, func: {success: success}})
				})
                let cancel = ( res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '是否要删除该节目？'});
            },
            handleSizeChange(val) {
		     	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
        },
    }
</script>
<style lang="scss">
    .ied-detail {
        .header-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            >span {
                font-size: 20px;
            }
        }

        #screen-img {
            margin: 25px 0;
            width: 70%;
            height: 500px;
            border: 1px solid #ccc;
            background: #000;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        .show-list {
            >p:first-child {
                font-size: 20px;
            }


        }

        .line {
            text-align: center;
        }
    }

    .screen-size {
        .el-form-item__content {
            .el-col .el-form-item {
                label {
                    width: 20px !important;
                    text-align: left;
                }

                >div {
                    margin-left: 35px !important;

                    input {
                        width: 100px;
                    }
                }
            }
        }
    }
</style>
